<template>
  <div class="com-container">
    <h3 class="title">{{ title }}</h3>
    <div ref="tag_ref" class="com-chart">
      <div
        v-for="tag in randerList"
        :key="tag.id"
        class="tag"
        :style="{left:tag.x+'px',top:tag.y+'px',color:tag.color,opacity:tag.opacity,filter:tag.filter,fontSize:tag.fontSize+'px',transform: tag.transform}"
      >
        {{ tag.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { getAllTag } from '@/api/common/common'

export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    params: {

    }
  },
  data() {
    return {
      title: '标签数据',
      tagList: [],
      randerList: [],
      radius: 112,
      distance: 187
    }
  },
  watch: {
    params: {
      handler(oldValue, newValue) {
        this.getData()
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener('resize', this.screenAdapter)
  },
  screenAdapter() {
    this.chartInstance.resize()
  },
  methods: {

    compare(property) {
      return function(a, b) {
        const value1 = a[property].length
        const value2 = b[property].length
        return value2 - value1
      }
    },
    async getData() {
      if (this.url !== '') {
        getAllTag({ url: this.url, params: this.params }).then(response => {
          this.tagList = response.list.map((item) => {
            return item['name']
          })
          this.title = response.title
          this.initPosition()
          this.$forceUpdate()
        })
      } else {
        this.tagList = ['标签1', '标签二']
      }
    },
    // 生成tag的三维坐标
    initPosition() {
      const len = this.tagList.length
      const radius = this.radius// 球体半径
      for (let i = 0; i < len; i++) {
        const k = (2 * (i + 1) - 1) / len - 1
        const a = Math.acos(k)
        const b = a * Math.sqrt(len * Math.PI)
        const x = radius * Math.sin(a) * Math.cos(b)
        const y = radius * Math.sin(a) * Math.sin(b)
        const z = radius * Math.cos(a)
        const fontSize = 12
        const color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')'
        const alpha = (z + radius) / (2 * radius)
        const opacity = alpha + 0.5
        const filter = 'alpha(opacity = ' + (alpha + 0.5) * 100 + ')'
        this.randerList = this.randerList.concat({
          name: this.tagList[i],
          x: x,
          y: y,
          z: z,
          color: color,
          opacity: opacity,
          filter: filter,
          fontSize: fontSize
        })
      }
      this.animate()
    },
    animate() {
      this.randerList.forEach(function(item) {
        const distance = 187
        const radius = 112
        const scale = distance / (distance - item.z)
        const alpha = (item.z + radius) / (2 * radius)
        const transform = 'translate(-50%,-50%) scale(' + scale + ')'
        item.opacity = alpha + 0.5
        item.zIndex = parseInt(scale * 100)
        item.transform = transform
        item.webkitTransform = transform
      })
      this.rotateX()
      this.rotateY()
      // console.log(this.randerList)
      requestAnimationFrame(this.animate)
    },

    rotateX() {
      const angleX = Math.PI / 500
      const cos = Math.cos(angleX)
      const sin = Math.sin(angleX)
      this.randerList.forEach(function(item) {
        const y1 = item.y * cos - item.z * sin
        const z1 = item.z * cos + item.y * sin
        item.y = y1
        item.z = z1
      })
    },
    rotateY() {
      const angleY = Math.PI / 500
      const cos = Math.cos(angleY)
      const sin = Math.sin(angleY)
      this.randerList.forEach(function(item) {
        const x1 = item.x * cos - item.z * sin
        const z1 = item.z * cos + item.x * sin
        item.x = x1
        item.z = z1
      })
    }
  }
}
</script>

<style scoped>

    .com-container {
        width: 100%;
        height: 350px;
        position: relative;
    }

    .com-chart {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
    }

    .tag {
        position: absolute;
    }

    .tag:hover {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }

    .title{
        position: absolute;
        top: 5px;
        left: 5px;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
    }

    canvas {
        border-radius: 20px;
    }
</style>
